<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input id="selectUser" type="text" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button onclick="selectUserByUserName()" class="layui-btn" type="button"><i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','./user-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th hidden>ID</th>
            <th>序号</th>
            <th>登录名</th>
            <th>密码</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tab"></tbody>
        <tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>


</div>

<script>
    $(document).ready(function enterJudge(e) {
        $(this).keydown(function (e) {
            if (e.which == "13" && $("#selectUser").val() != '') {
                selectUserBysuername();
                return false;
            }
        })
    })
    // 加载界面后执行代码
    // let totalPages =0;
    // let totalCounts=0;
    // let currentPage=0;
    let [totalPages, totalCounts, currentPage] = [0, 0, 0]
    $(document).ready(function (e) {
        showUser(-1);
        $('#pagination1').jqPaginator({
            totalPages,
            totalCounts,
            currentPage,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="last"><a href="javascript:;">末页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (pageNum) {
                showUser(pageNum);
            }
        })
    })

    function showUser(pageNum) {
        $.ajax({
            url: "../user/selectAllUser",
            dataType: "json",
            type: "post",
            async: false,
            data: {
                "pageNum": pageNum,
                "pageSize": 5
            },
            success: function (res) {
                // console.log(res);

                //取出用户信息
                let userList = res.list;
                // console.log(res)
                if (userList.length > 0) {
                    if (pageNum === -1) {
                        totalPages = res.pages;
                        totalCounts = res.total;
                        currentPage = res.pageNum;
                    }
                    //    定义一个空字符串
                    let str = '';
                    for (let i = 0; i < userList.length; i++) {
                        str += '<tr class="dataTr">' +
                            '<td hidden>' + userList[i].id + '</td>' +
                            '<td>' + Number(res.pageSize * (pageNum - 1) + (1 + i)) + '</td>' +
                            '<td>' + userList[i].username + '</td>' +
                            '<td>' + userList[i].password + '</td>' +
                            '<td>' + userList[i].age + '</td>' +
                            '<td>' + userList[i].hobby + '</td>' +
                            '<td>' + userList[i].role + '</td>' +
                            '<td>' + userList[i].state + '</td>' +
                            "<td class='td-manage'>&nbsp;&nbsp;&nbsp;&nbsp;<button type='button'  onclick='openUpdate(this)'><i class='layui-icon'>&#xe642;</button>" +
                            "<button  onclick='deleteUser(" + userList[i].id + ")'><i class='layui-icon'>&#xe640;</i></button></td>" +
                            '</tr>';
                    }
                    $('#tab').html(str);
                    $('.x-right').html('共' + res.total + '条');

                } else {
                    totalPages = 1;
                    totalCounts = 1;
                    currentPage = 1;
                    $("#tab").append("<tr><td colspan=8 align= 'center'>暂时没有数据哦，快去添加一条吧</td></tr>");
                }

            },
            error: function (res) {
                alert("服务器错误" + res);
            }
        })
    }

    function deleteUser(id) {
        if (confirm("确定")) {
            $.ajax({
                url: "../user/deleteUserById",
                dataType: 'json',
                data: {
                    id
                },
                success: function (res) {
                    alert(res.deleteInfo)
                    location.reload();
                    // alert(res)
                },
                error: function (res) {
                    alert("服务器错误")
                }
            })
        }
        // alert(id);
    }

    function selectUserByUserName() {
        showSelectUser(-1);

        $('#pagination1').jqPaginator({
            totalPages,
            totalCounts,
            currentPage,
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="last"><a href="javascript:;">末页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (pageNum) {
                console.log(pageNum)
                showSelectUser(pageNum);

            }
        })


    }

    function showSelectUser(pageNum) {
        $.ajax({
            url: "../user/selectUserByUserName",
            dataType: "json",
            type: "post",
            async: false,
            data: {
                "username": $('#selectUser').val(),
                "pageNum": pageNum,
                "pageSize": 5
            },
            success: function (res) {
                console.log(res);
                //取出用户信息
                let userList = res.list;
                // console.log(res)
                if (userList.length > 0) {
                    if (pageNum === -1) {
                        totalPages = res.pages;
                        totalCounts = res.total;
                        currentPage = res.pageNum;
                    }
                    //    定义一个空字符串
                    let str = '';
                    for (let i = 0; i < userList.length; i++) {
                        str += '<tr class="dataTr">' +
                            '<td hidden>' + userList[i].id + '</td>' +
                            '<td>' + Number(res.pageSize * (pageNum - 1) + (1 + i)) + '</td>' +
                            '<td>' + userList[i].username + '</td>' +
                            '<td>' + userList[i].password + '</td>' +
                            '<td>' + userList[i].age + '</td>' +
                            '<td>' + userList[i].hobby + '</td>' +
                            '<td>' + userList[i].role + '</td>' +
                            '<td>' + userList[i].state + '</td>' +
                            "<td class='td-manage'><button type='button'  onclick='openUpdate(this)'><i class='layui-icon'>&#xe642;</button>" +
                            "<button  onclick='deleteUser(" + userList[i].id + ")'><i class='layui-icon'>&#xe640;</i></button></td>" +
                            '</tr>';
                    }
                    $('#tab').html(str);
                    $('.x-right').html('共' + userList.length + '条');

                } else {
                    totalPages = 1;
                    totalCounts = 1;
                    currentPage = 1;
                    $("#tab").append("<tr><td colspan=8 align= 'center'>暂时没有数据哦，快去添加一条吧</td></tr>");
                }

            },
            error: function (res) {
                alert("服务器错误" + res);
            }
        })
    }

    //    打开修改页面
    function openUpdate(obj) {
        let username = $(obj).parent().parent().find('td').eq(2).text();
        let password = $(obj).parent().parent().find('td').eq(3).text();
        let hobby=$(obj).parent().parent().find('td').eq(5).text();
        localStorage.setItem('username',username);
        localStorage.setItem('password',password);
        localStorage.setItem('hobby',hobby);
        // console.log(username, password,hobby);
        x_admin_show('修改用户', '/jsp/user-edit.jsp', 500, 400)
    }
</script>
</body>

</html>